<template>
  <!-- 合同详情页面 -->
  <div class="layout-content">
    <a-skeleton v-if="loading" />
    <div v-else class="contract-detail-page">
      <div class="contract-top flex">
        <div class="content flex-between flex-align-c">
          <div class="left">
            <p>
              <c-business-direction
                :flag="contractDetailData.businessDirection"
              />
              合同状态：<c-status
                :flag="contractDetailData.contractType"
                :type="'text'"
              />
            </p>
            <p>
              <span class="buy">买</span>
              {{ contractDetailData.buyerCompanyName }}
              <span class="line">————</span>
              <span class="sell">卖</span>
              {{ contractDetailData.sellerCompanyName }}
            </p>
          </div>
          <div class="right">
            <c-contract-btn-list
              :btnData="btnData"
              :identity="identity"
              @initPage="initPage"
              @getWillModalData="getWillModalData"
              @openHandPaintedModal="openHandPaintedModal"
              :type="'btn'"
            ></c-contract-btn-list>
          </div>
        </div>
      </div>
      <div class="contract-information">
        <div>
          <div class="flex-between flex-align-c contract-code">
            <p>合同编号： {{ contractDetailData.contractCode }}</p>
            <p>{{ $getTime(contractDetailData.createDate) }}</p>
          </div>
          <div class=" flex-between flex-align-c contract-info">
            <p>商品：{{ contractDetailData.categoryName }}</p>
            <p>数量：{{ contractDetailData.amount }}</p>
            <p>总价：￥{{ contractDetailData.totalPrice }}</p>
          </div>
        </div>
      </div>
      <a-tabs type="card" size="small">
        <a-tab-pane key="1" tab="合同预览">
          <a-tabs size="small">
            <a-tab-pane
              v-for="(item, index) in contractDetailData.contractPreview"
              :key="index"
            >
              <span slot="tab" class="ellipsis">
                <a-tooltip
                  placement="topLeft"
                  autoAdjustOverflow
                  overlayClassName="overlay"
                  :title="item.sourceName"
                >
                  <c-icon type="dingdan" />
                  {{ item.sourceName }}
                </a-tooltip>
              </span>

              <div class="tc">
                <iframe
                  frameborder="0"
                  v-if="item.sourceType == '.pdf'"
                  id="previewPdf"
                  :src="pdfBaseUrl + 'file=' + item.sourceUrl"
                  height="1200"
                  width="100%"
                >
                </iframe>
                <img
                  v-viewer="{ movable: true, title: true }"
                  v-else
                  :src="item.sourceUrl"
                  alt=""
                />
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
        <a-tab-pane key="2" tab="关联订单">
          <c-table
            size="small"
            @cellClick="gotoDetail"
            :loading="loading"
            :data="contractDetailData.contractOrder"
            :columns="orderColumns"
            :reload="false"
            :rowKey="'orderId'"
          >
            <template slot="createDate" slot-scope="{ row }">
              <span>{{ $getTime(row.createDate) }}</span>
            </template>
          </c-table>
        </a-tab-pane>

        <a-tab-pane key="3" tab="提货信息">
          <c-table
            size="small"
            :loading="loading"
            :data="contractDetailData.contractEntityInventory"
            :columns="goodsInformationColumns"
            :reload="false"
          >
          </c-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="will-modal">
      <!-- 签署 -->
      <c-modal
        :title="curModal == 'will' ? '合同签署' : '手绘签署'"
        v-model="signModalVisable"
        :width="700"
        noFooter
        @cancel="onCancelSignModal"
      >
        <will-modal
          v-if="curModal == 'will'"
          @onCancelWillModal="onCancelSignModal"
          @initPage="initPage"
          :visable="signModalVisable"
          :datas="willModalDatas"
        ></will-modal>
        <hand-painted-content
          v-if="curModal == 'hand'"
          @initPage="initPage"
          @onCancelModal="onCancelSignModal"
          :datas="handPaintedModalDatas"
        ></hand-painted-content>
      </c-modal>
    </div>
  </div>
</template>
<script>
import cContractBtnList from "./components/contract-button-list";
import cBusinessDirection from "@/components-business/contract/businessDirection";
import cStatus from "@/components-business/contract/status";
import { getCurIdentity } from "@/util/common";
import willModal from "./components/will-content";
import handPaintedContent from "./components/esign-content";
import globalSite from "@/config/globalSite";
import {
  getBuyerContractDetail,
  getSellerContractDetail
} from "@/api/contract";

//提货信息
const goodsInformationColumns = [
  {
    title: "库存单号",
    key: "entityInventoryCode",
    dataIndex: "entityInventoryCode"
  },
  {
    title: "商品品种",
    key: "categoryName",
    dataIndex: "categoryName"
  },
  {
    title: "品牌",
    key: "brand",
    dataIndex: "brand"
  },
  {
    title: "规格",
    key: "spec",
    dataIndex: "spec"
  },
  {
    title: "材质",
    key: "material",
    dataIndex: "material"
  },
  {
    title: "其他",
    key: "other",
    dataIndex: "other"
  },
  {
    title: "仓库简称",
    key: "warehouseName",
    dataIndex: "warehouseName"
  },
  {
    title: "库位号",
    key: "positionCode",
    dataIndex: "positionCode"
  },
  {
    title: "材料号/捆绑号",
    key: "materialCode",
    dataIndex: "materialCode"
  },
  {
    title: "实物重量",
    key: "weight",
    dataIndex: "weight"
  },
  {
    title: "备注",
    key: "remark",
    dataIndex: "remark"
  }
];
// 关联订单
const orderColumns = [
  {
    title: "订单编号",
    key: "orderCode",
    dataIndex: "orderCode"
  },
  {
    title: "商品品名",
    key: "categoryName",
    dataIndex: "categoryName"
  },
  {
    title: "品牌",
    key: "brand",
    dataIndex: "brand"
  },
  {
    title: "规格",
    key: "spec",
    dataIndex: "spec"
  },
  {
    title: "材质",
    key: "material",
    dataIndex: "material"
  },
  {
    title: "其他",
    key: "other",
    dataIndex: "other"
  },
  {
    title: "仓库简称",
    key: "warehouseShortName",
    dataIndex: "warehouseShortName"
  },
  {
    title: "合约",
    key: "futuresContract",
    dataIndex: "futuresContract"
  },
  {
    title: "成交数（吨）",
    key: "dealAmount",
    dataIndex: "dealAmount"
  },
  {
    title: "基价（元）",
    key: "basePrice",
    dataIndex: "basePrice"
  },
  {
    title: "升贴水（元）",
    key: "premium",
    dataIndex: "premium"
  },
  {
    title: "时间",
    key: "createDate",
    scopedSlots: { customRender: "createDate" }
  }
];
export default {
  components: {
    cBusinessDirection,
    cContractBtnList,
    cStatus,
    willModal,
    handPaintedContent
  },
  data() {
    return {
      curModal: "will",
      signModalVisable: false,
      willModalDatas: {},
      handPaintedModalDatas: {},
      goodsInformationColumns, //提货信息表格列的配置
      orderColumns, //关联订单表格列的配置
      data: {},
      pageNum: 1,
      loading: false,
      contractDetailData: {}, //合同详情数据
      picPage: 1
    };
  },
  watch: {},
  computed: {
    btnData() {
      return {
        contractType: Number(this.contractDetailData.contractType),
        id: Number(this.$route.query.contractId),
        version: this.contractDetailData.version,
        isAdmin: this.contractDetailData.isAdmin,
        showSignContract: this.contractDetailData.showSignContract
      };
    },
    identity() {
      return getCurIdentity();
    },
    pdfBaseUrl() {
      return globalSite.pdfBaseUrl;
    }
  },
  created() {
    this.initPage();
  },

  methods: {
    //初始化页面
    initPage() {
      this.willModalVisable = false;
      this.loading = true;
      let requesFun;
      this.identity === 1
        ? (requesFun = getBuyerContractDetail)
        : (requesFun = getSellerContractDetail);
      requesFun({ contractId: this.$route.query.contractId })
        .then(res => {
          this.contractDetailData = res;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //打开手绘签署弹窗
    openHandPaintedModal(type) {
      this.curModal = type;
      this.signModalVisable = true;
    },
    //关闭手绘签署弹窗
    onCancelSignModal() {
      this.signModalVisable = false;
    },
    //获取意愿刷脸数据
    getWillModalData(type, data) {
      this.curModal = type;
      this.willModalDatas = data;
      this.signModalVisable = true;
    },

    // 跳转订单详情详情
    gotoDetail({ col, record }) {
      let priceType = this.contractDetailData.priceType;
      if (col.dataIndex !== "tag") {
        let routeName;
        //  卖家-确定价-订单详情 sellerConfirmOrderDetail
        //  买家-确定价-订单详情 buyerConfirmOrderDetail
        //  卖家-点价-订单详情 sellerPricingOrderDetail
        //  买家-点价-订单详情 buyerPricingOrderDetail
        switch (this.identity) {
          case 1:
            //买家点价
            if (priceType == 1) {
              routeName = "buyerPricingOrderDetail";
            }
            // 买家确定价
            else if (priceType == 2) {
              routeName = "buyerContractDetail";
            }
            break;
          case 2:
            //卖家点价
            if (priceType == 1) {
              routeName = "sellerPricingOrderDetail";
            }
            // 卖家确定价
            else if (priceType == 2) {
              routeName = "sellerConfirmOrderDetail";
            }
        }
        this.$router.push({ name: routeName, query: { id: record.orderId } });
      }
    },
    reload() {
      this.pageNum = 1;
      this.initPage();
    }
  },
  beforeDestroy() {}
};
</script>
<style></style>
<style lang="scss" scoped>
.contract-detail-page {
  .contract-top {
    .content {
      width: 100%;
      .right {
        ::v-deep .ant-btn {
          font-size: 14px;
        }
      }
    }
    .line {
      margin: 0 6px;
    }
    .buy,
    .sell {
      display: inline;
      border: 1px solid #4d65fd;
      margin: 0 6px;
      color: #4d65fd;
      padding: 0 2px;
      border-radius: 2px;
    }
  }
  .contract-information {
    .contract-info {
      p {
        margin: 15px;
      }
    }
    .contract-code {
      background: #fafafa;
      p {
        margin: 15px;
      }
    }
    border: 1px solid #e8e8e8;
    margin: 20px 0 40px 0;
  }
  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
    display: inline-block;
  }
  .iconfont {
    margin-right: 0 !important;
  }

  ::v-deep .ant-tag {
    line-height: 18px;
  }
  ::v-deep .ant-tabs-tab {
    margin: 0;
    background: #fafafa;
    border-right: 1px solid #f2f2f2;
  }
  ::v-deep .ant-tabs-tab-active {
    background: #fff;
  }
}
</style>
